<template>
  <div class="blog-context">
    <ul>
      <li :key="index" v-for="(list,index) in articleList" class="one">
        <Card class="card">
          <lenSvg :isShow="list.istop>0"/>
          <div class="context">
            <div class="pic">
              <img v-if="list.images==''" src="../../../static/image/default.jpg"/>
              <img style="" v-else="list.images!=null" :src="list.images"/>
            </div>
            <div class="title" @click="detail(list.id)">
              <h3>{{list.title}}</h3>
            </div>
            <p class="inc">
              <span>{{list.introduction}}</span>
            </p>
            <div class="time"><img src="../../assets/image_.jpg" border="0" width="30"
                                   height="30">{{list.author}}<span>|</span>
              {{dateFilter(list.updatetime)}}

            </div>
          </div>
        </Card>
      </li>
    </ul>
    <div style="background: white;margin-top: 10px;width: 100%;border: 1px solid #ececec;">
      <Page :current="currentPage" :total="total" :page-size="pageSize" @on-change="changePage" show-total></Page>
    </div>


  </div>
</template>


<script>
  import {parseTime} from '@/util/date'
  import lenSvg from '../svg/index'

  export default {
    components: {lenSvg},
    data() {
      return {
        msg: 'zxm',
        message: [],
        datas: [
          {
            id: 1,
            name: '标题1'
          }, {
            id: 2,
            name: '标题2'
          }
        ],
        articleList: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        value1: 0,
        param: '',
        searchWord: ''
      }
    },
    created() {
      this.initArticle();
    },
    computed: {
      code: function () {
        return this.$route.params.code
      }
    },

    methods: {
      initArticle() {
        this.searchWord = this.$route.params.word;
        let page = this.$route.params.page;
        if (page !== undefined && !isNaN(Number(page))) {
          this.currentPage = Number(page);
        }
        this.$http.get('/api/blog/list', {
          params: {
            searchWord: this.searchWord,
            page: this.currentPage, limit: this.pageSize
          },
        }).then(resp => {
          this.articleList = resp.data.data;
          this.total = resp.data.count;
          // this.currentPage = resp.data.currentPage;
        }).catch(err => {
          this.$Message.error('加载数据失败!');
        });
      },
      detail(code) {
        this.$router.push(`/detail/${code}`)
      },
      changePage(page) {
        this.currentPage = page;
        if (page === 1) {
          this.$router.push(`/index`)
        } else {
          this.$router.push(`/index/${page}`)
        }
        this.initArticle();
      },
      selectHome: function () {
        this.$router.push('/detail/' + this.message);
      },
      dateFilter(t) {
        if (t) {
          return parseTime(t)
        } else {
          return '未知'
        }
      }
    },
    mounted() {

    },

    watch: {}
  }
</script>
<style scoped>
  @import '../../../static/css/blog-context.css';
</style>
